'use strict';

import React from 'react';
import { connect } from 'react-redux';
import { Link} from 'react-router';
import * as actions from '../../actions/zhekou_limit_edit_items';
import { Button,Icon,Dialog,Pagination,Input,Loading,Menu } from 'qnui';
import Radio,{ Group as RadioGroup } from 'qnui/lib/radio';
import { Row, Col } from 'qnui/lib/grid';
import Breadcrumb from 'qnui/lib/breadcrumb'
import Step, { Item as StepItem } from 'qnui/lib/step';
import SystemDialog from 'components/system-dialog/index';
import './index.scss';

class ZhekouLimitEditItems extends React.Component {
    constructor(props) {
        super(props);
		this.dispatch = this.props.dispatch;
        this.state = {
			refreshDialog:false,
			refreshContent:"",
			currentPage:1,
			pageSize:10,
			activity_id:0
        };
    }
	componentWillMount(){
		this.setState({activity_id:this.props.location.query.activity_id});
		this.dispatch(
			actions.getList({
				activity_id:this.props.location.query.activity_id,
				page:1,
				page_size:this.state.pageSize
			})
		);
	}
	onCloseSystemDialog(){
		this.setState({"refreshDialog":false,"orderDialog":false});
		this.props.dispatch(actions.closeDialog());
	}
	handleCheckStatus(){
		return;
	}
	handlePageChange(page){
		this.setState({"currentPage":page});
		this.dispatch(
			actions.getList({
				activity_id:this.state.activity_id,
				page:page,
				page_size:this.state.pageSize
			})
		);
	}
	handlePageSizeChange(size){
		this.setState({"currentPage":1,"pageSize":size});
		this.dispatch(
			actions.getList({
				activity_id:this.state.activity_id,
				page:1,
				page_size:size
			})
		);
	}
	changePrice(ztype,item,value){
		this.dispatch(
			actions.resetItem(ztype,item,value)
		);
	}
	changeLimit(item,value){
		this.dispatch(
			actions.setLimit(item,value)
		);
	}
	editItemInActive(num_iid){
		const doneItems = this.props.zhekou_limit_edit_items.data.items.item;
		doneItems.map(item=>{
			if(item.num_iid==num_iid){
				this.dispatch(
					actions.editItemInActive(item)
				);
			}
		});
	}
	removeItemInActive(detail_id){
		this.dispatch(
			actions.removeItem(this.state.activity_id,detail_id)
		);
	}
  render() {
	const isLoading = (this.props.zhekou_limit_edit_items.creating);
	const data = this.props.zhekou_limit_edit_items.data;
	const doneItems = data?data.items.item:[];
	const total = data?parseInt(data.total_count):0;
	const noneMsg = total?"":isLoading?<Row justify="center">正在读取。。。</Row>:<Row justify="center">活动中没有任何商品</Row>;
	return (
        <div className="page1-page">
			<Row style={{background:"#F6F6F6",margin:"3px 0",height:"43px"}} justify="start">
			<Col span="8" align="center">
			<Breadcrumb maxNode={5}>
				  <Breadcrumb.Item>打折活动</Breadcrumb.Item>
				  <Breadcrumb.Item>限时折扣</Breadcrumb.Item>
				  <Breadcrumb.Item>活动列表</Breadcrumb.Item>
			  </Breadcrumb>
			</Col>
		  </Row>
		  <SystemDialog 
				 loginError={this.props.zhekou_limit_edit_items.loginError}
			     creating={this.props.zhekou_limit_edit_items.creating}
			     message={this.props.zhekou_limit_edit_items.message}
			     error={this.props.zhekou_limit_edit_items.error}
				 refreshDialog={this.state.refreshDialog}
				 orderDialog={this.state.orderDialog}
		  		 onCloseDialog={this.onCloseSystemDialog.bind(this)}
				/>
		<Row style={{padding:"0"}}>
				<Col span="12">
					<Pagination current={this.state.currentPage} total={total} pageSize={this.state.pageSize} pageSizeList={[1,10,20]} pageSizeSelector="dropdown" type="simple" onChange={this.handlePageChange.bind(this)} onPageSizeChange={this.handlePageSizeChange.bind(this)} />
					{/*
						<RadioGroup defaultValue="onseal" onChange={this.handleCheckStatus.bind(this)}>
							<Radio id="all" value="all">全部</Radio>
							<Radio id="runing" value="runing">进行中</Radio>
							<Radio id="waitting" value="waitting">未开始</Radio>
							<Radio id="stoped" value="stoped">已结束</Radio>
						</RadioGroup>
					*/}
				</Col>
				<Col span="12" style={{textAlign:"right"}}>
					<Link to={{pathname:"/zhekou_limit_step2",state:{doneItems,activityId:this.state.activity_id}}}><Button shape="ghost">添加商品</Button></Link>
					&nbsp;
					<Link to={"/zhekou_limit_list"}><Button type="primary">返回列表</Button></Link>
				</Col>
		</Row>
		{noneMsg}
		{doneItems.map((item)=>{
			const menu = <Menu>
							<Menu.Item key={item.detail_id} onClick={this.removeItemInActive.bind(this)}>删除</Menu.Item>
						</Menu>
			const decreaseAmount = (item.ztype=="decreaseAmount")?item.value:"";
			const discountRate = (item.ztype=="discountRate")?item.value:"";
			const limitCount = item.limit_count;
			return(
				<Row key={item.num_iid} align="center" style={{padding:0,margin:"5px 0",borderBottom:"1px dashed #CCCCCC"}}>
					<Col fixedSpan="5">
						<a href={"https://item.taobao.com/item.htm?id="+item.num_iid} target="_blank"><img style={{border:"1px solid #C7C7C7"}} src={item.pic_url+"_80x80q90.jpg_.webp"} /></a>
					</Col>
					<Col span="4">
						<span><a href={"https://item.taobao.com/item.htm?id="+item.num_iid} target="_blank">{item.title}</a></span>
					</Col>
					<Col>
						<div className="price_number" style={{fontWeight:"bold",width:"70px",float:"left",textAlign:"right",lineHeight:"32px"}}>{item.price}</div>&nbsp;
						<Input 
							style={{width:"120px"}}
							size="large" 
							addonBefore="打" 
							state={item.ztype=="discountRate"?"success":""}
							onChange={this.changePrice.bind(this,"discountRate",item)}
							value={discountRate}
							addonAfter="折" 
						/>&nbsp;
						<Input 
							style={{width:"120px"}}
							size="large" 
							addonBefore="减"
							state={(item.ztype=="decreaseAmount")?"success":""}
							onChange={this.changePrice.bind(this,"decreaseAmount",item)}
							value={decreaseAmount}
							addonAfter="元" 
						/>&nbsp;
						<Input 
							style={{width:"120px"}}
							size="large" 
							addonBefore="限"
							value={limitCount}
							onChange={this.changeLimit.bind(this,item)}
							addonAfter="件" 
						/>&nbsp;
						<Input 
							style={{width:"70px"}}
							size="large" 
							placeholder="折后价"
							onChange={this.changePrice.bind(this,"finalPrice",item)}
							value={item.finaPrice}
						/>
					</Col>
					<Col fixedSpan="5">
						<Button.Split menu={menu} size="small" type="secondary" onClick={this.editItemInActive.bind(this,item.num_iid)}>修改折扣</Button.Split>
					</Col>
				</Row>
			)
		})}
        </div>
    );
  }
}


export default connect((state)=> {
  return {
    zhekou_limit_edit_items: state.zhekou_limit_edit_items
  };
})(ZhekouLimitEditItems);
